{% extends "base.html" %}

{% block title %}确认删除 - Django管理平台{% endblock %}
{% block description %}确认删除用户操作，此操作不可撤销{% endblock %}

{% block extra_css %}
<style>
    .delete-container {
        max-width: 500px;
        margin: 0 auto;
        animation: fadeIn 0.3s ease-out;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 1.5rem;
    }
    .card-danger {
        border-left: 4px solid #ef4444;
    }
    .p-5 {
        padding: 1.25rem;
    }
    .mb-6 {
        margin-bottom: 1.5rem;
    }
    .mt-4 {
        margin-top: 1rem;
    }
    .flex {
        display: flex;
    }
    .flex-col {
        flex-direction: column;
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:justify-between {
        justify-content: space-between;
    }
    .gap-2 {
        gap: 0.5rem;
    }
    .gap-3 {
        gap: 0.75rem;
    }
    .gap-4 {
        gap: 1rem;
    }
    .items-center {
        align-items: center;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-end {
        justify-content: flex-end;
    }
    .text-sm {
        font-size: 0.875rem;
    }
    .text-2xl {
        font-size: 1.5rem;
    }
    .font-bold {
        font-weight: 700;
    }
    .font-medium {
        font-weight: 500;
    }
    .text-text-primary {
        color: #111827;
    }
    .text-text-secondary {
        color: #4b5563;
    }
    .text-text-tertiary {
        color: #9ca3af;
    }
    .text-primary {
        color: #3b82f6;
    }
    .text-success {
        color: #10b981;
    }
    .text-danger {
        color: #ef4444;
    }
    .text-warning {
        color: #f59e0b;
    }
    .bg-gray-50 {
        background-color: #f9fafb;
    }
    .bg-danger-light {
        background-color: #fee2e2;
    }
    .border-t {
        border-top: 1px solid #e5e7eb;
    }
    .rounded-lg {
        border-radius: 0.5rem;
    }
    .p-4 {
        padding: 1rem;
    }
    .mb-4 {
        margin-bottom: 1rem;
    }
    .user-info-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .user-info-label {
        font-weight: 500;
        color: #4b5563;
    }
    .user-info-value {
        color: #111827;
        word-break: break-word;
    }
    .btn {
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
    }
    .btn-primary {
        background-color: #3b82f6;
        color: white;
    }
    .btn-primary:hover {
        background-color: #2563eb;
        transform: translateY(-1px);
    }
    .btn-outline {
        background-color: white;
        color: #374151;
        border: 1px solid #e5e7eb;
    }
    .btn-outline:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }
    .btn-danger {
        background-color: #ef4444;
        color: white;
    }
    .btn-danger:hover {
        background-color: #dc2626;
        transform: translateY(-1px);
    }
    .btn-success {
        background-color: #10b981;
        color: white;
    }
    .btn-success:hover {
        background-color: #059669;
    }
    .warning-banner {
        background-color: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1.5rem;
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.9;
        }
    }
    .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background-color: #fee2e2;
        border-radius: 50%;
        margin: 0 auto 1.5rem;
    }
    .delete-icon {
        font-size: 2rem;
        color: #ef4444;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .delete-container {
            max-width: 100%;
            padding: 0 1rem;
        }
        .btn {
            font-size: 0.75rem;
            padding: 0.375rem 0.75rem;
        }
        .user-info-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="delete-container">
        <!-- 页面标题和面包屑 -->
        <div class="mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <div class="flex items-center text-sm text-text-tertiary mb-1">
                        <a href="/" class="hover:text-primary">首页</a>
                        <span class="mx-2">/</span>
                        <a href="{% url 'accounts:user_list' %}" class="hover:text-primary">用户管理</a>
                        <span class="mx-2">/</span>
                        <span>确认删除</span>
                    </div>
                    <h2 class="text-2xl font-bold">确认删除用户</h2>
                </div>
            </div>
        </div>
        
        <!-- 警告横幅 -->
        <div class="warning-banner">
            <div class="flex items-start">
                <i class="fas fa-exclamation-triangle text-warning mr-3 mt-1"></i>
                <div>
                    <p class="font-medium text-warning-dark mb-1">操作警告：</p>
                    <p class="text-sm text-text-secondary">此操作不可撤销。删除用户后，所有相关数据将被永久移除。请确认您确实要执行此操作。</p>
                </div>
            </div>
        </div>
        
        <!-- 删除确认卡片 -->
        <div class="card card-danger">
            <div class="p-5">
                <!-- 删除图标 -->
                <div class="icon-container">
                    <i class="fas fa-user-slash delete-icon"></i>
                </div>
                
                <!-- 确认消息 -->
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold text-text-primary mb-2">您确定要删除用户吗？</h3>
                    <p class="text-text-secondary">删除后将无法恢复此用户的数据</p>
                </div>
                
                <!-- 用户信息 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h4 class="font-medium mb-3">用户信息：</h4>
                    <div class="user-info-grid">
                        <div class="user-info-label">用户名：</div>
                        <div class="user-info-value">{{ object.username }}</div>
                        
                        <div class="user-info-label">邮箱：</div>
                        <div class="user-info-value">{{ object.email|default:'未设置' }}</div>
                        
                        <div class="user-info-label">是否激活：</div>
                        <div class="user-info-value">
                            {% if object.is_active %}
                                <span class="text-success"><i class="fas fa-check-circle mr-1"></i>已激活</span>
                            {% else %}
                                <span class="text-danger"><i class="fas fa-times-circle mr-1"></i>未激活</span>
                            {% endif %}
                        </div>
                        
                        <div class="user-info-label">是否管理员：</div>
                        <div class="user-info-value">
                            {% if object.is_staff %}
                                <span class="text-success"><i class="fas fa-check-circle mr-1"></i>是</span>
                            {% else %}
                                <span class="text-danger"><i class="fas fa-times-circle mr-1"></i>否</span>
                            {% endif %}
                        </div>
                        
                        <div class="user-info-label">创建时间：</div>
                        <div class="user-info-value">{{ object.date_joined|date:"Y-m-d H:i:s" }}</div>
                        
                        <div class="user-info-label">最后登录：</div>
                        <div class="user-info-value">{{ object.last_login|date:"Y-m-d H:i:s"|default:'从未登录' }}</div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <form method="post" class="delete-form">
                    {% csrf_token %}
                    <div class="flex flex-col sm:flex-row gap-3 justify-end">
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-outline cancel-button">
                            <i class="fas fa-times mr-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-danger delete-button">
                            <i class="fas fa-trash-alt mr-2"></i>确认删除
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const deleteForm = document.querySelector('.delete-form');
        const deleteButton = document.querySelector('.delete-button');
        const cancelButton = document.querySelector('.cancel-button');
        const warningBanner = document.querySelector('.warning-banner');
        const card = document.querySelector('.card');
        
        // 删除按钮交互效果
        if (deleteButton) {
            // 鼠标悬停时卡片轻微抖动效果
            deleteButton.addEventListener('mouseenter', function() {
                card.classList.add('shake-animation');
                setTimeout(() => {
                    card.classList.remove('shake-animation');
                }, 500);
            });
            
            // 表单提交处理
            deleteForm.addEventListener('submit', function(e) {
                // 显示确认对话框
                const confirmed = confirm('您确定要永久删除此用户吗？此操作无法撤销。');
                
                if (confirmed) {
                    // 添加提交加载状态
                    deleteButton.disabled = true;
                    deleteButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>删除中...';
                    
                    // 添加卡片删除中状态
                    card.classList.add('deleting');
                    card.style.opacity = '0.7';
                    
                    // 禁用取消按钮
                    cancelButton.disabled = true;
                    cancelButton.classList.add('disabled');
                } else {
                    // 取消提交
                    e.preventDefault();
                }
            });
        }
        
        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            // Esc 取消操作
            if (e.key === 'Escape') {
                if (cancelButton && !cancelButton.disabled) {
                    cancelButton.click();
                }
            }
            
            // Delete 键快速删除
            if (e.key === 'Delete') {
                if (deleteButton && !deleteButton.disabled) {
                    deleteForm.dispatchEvent(new Event('submit'));
                }
            }
        });
        
        // 按钮悬停效果增强
        const allButtons = document.querySelectorAll('.btn');
        allButtons.forEach(button => {
            if (!button.classList.contains('disabled')) {
                button.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-1px)';
                    this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
                });
                
                button.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = 'none';
                });
                
                button.addEventListener('mousedown', function() {
                    this.style.transform = 'translateY(0)';
                });
            }
        });
        
        // 添加自定义动画样式
        const styleSheet = document.createElement('style');
        styleSheet.textContent = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
                20%, 40%, 60%, 80% { transform: translateX(5px); }
            }
            .shake-animation {
                animation: shake 0.5s ease-in-out;
            }
        `;
        document.head.appendChild(styleSheet);
        
        // 滚动时导航栏样式变化
        const header = document.querySelector('header');
        if (header) {
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                } else {
                    header.classList.remove('shadow-md');
                }
            });
        }
        
        // 页面加载动画效果
        setTimeout(() => {
            warningBanner.style.opacity = '1';
        }, 300);
        
        // 添加用户信息区域的动画效果
        const userInfoSection = document.querySelector('.bg-gray-50');
        if (userInfoSection) {
            userInfoSection.style.opacity = '0';
            userInfoSection.style.transform = 'translateY(10px)';
            userInfoSection.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            
            setTimeout(() => {
                userInfoSection.style.opacity = '1';
                userInfoSection.style.transform = 'translateY(0)';
            }, 500);
        }
    });
</script>
{% endblock %}

